<template>
    <view class="verification-list">
        <!-- 全新的头部设计 -->
        <view class="header">
            <view class="title">联营核销管理中心</view>
            <view class="search-bar">
                <view class="search-input">
                    <u-search
                        v-model="searchKeyword"
                        placeholder="搜索联系人/商品名称"
                        :show-action="false"
                        @search="handleSearch"
                        @clear="handleClearSearch"
                    ></u-search>
                </view>
                <view class="filter-btn" @click="showFilter = true">
                    <u-icon name="calendar" color="#1890ff" size="30"></u-icon>
                </view>
            </view>
        </view>
        
        <!-- 筛选抽屉 -->
        <u-popup v-model="showFilter" mode="right" width="80%">
            <view class="filter-panel">
                <view class="filter-header">
                    <text class="filter-title">高级筛选</text>
                    <u-icon name="close" size="30" @click="showFilter = false"></u-icon>
                </view>
                
                <view class="filter-section">
                    <view class="section-title">时间范围</view>
                    <view class="date-range" @click="showCalendar = true">
                        <text>{{ dateRange || '请选择日期范围' }}</text>
                        <u-icon name="calendar" size="28"></u-icon>
                    </view>
                    <u-calendar
                        v-model="showCalendar"
                        mode="range"
                        @change="dateChange"
                        @confirm="dateConfirm"
                        :minDate="'2020-01-01'"
                        :maxDate="new Date().toISOString().split('T')[0]"
                    ></u-calendar>
                </view>
                
                <view class="filter-buttons">
                    <u-button @click="resetFilter" plain size="medium">重置</u-button>
                    <u-button @click="applyFilter" type="primary" size="medium">应用筛选</u-button>
                </view>
            </view>
        </u-popup>

        <!-- Order Lists with animation -->
        <mescroll-uni
            top="220rpx"
            ref="scroll"
            @init="mescrollInit"
            :up="{
                auto: true,
                page: {
                    num: 0,
                    size: 10
                },
                noMoreSize: 5,
                textLoading: '努力加载中...',
                textNoMore: '-- 已经到底啦 --',
                empty: {
                    icon: '/static/images/empty/order.png',
                    tip: '暂无核销记录~',
                    fixed: false,
                    btnText: '刷新',
                    btnClick: () => {
                        this.refreshData();
                    }
                },
                onScroll: true,
                isBounce: false,
                offset: 80,
                toTop: {
                    src: '/static/images/back-top.png',
                    offset: 1000,
                    duration: 300
                },
                bgColor: '#f5f7fa'
            }"
            @up="upCallback"
            @down="downCallback"
        >
            <view class="order-contain">
                <view
                    class="order animated-item"
                    v-for="orderItem in orderList"
                    :key="orderItem.id"
                    @click="goOrderDetail(orderItem.code)"
                >
                    <!-- 订单头部信息 -->
                    <view class="order-header">
                        <view class="order-info">
                            <view class="order-user">
                                <u-icon name="account" size="28" color="#1890ff"></u-icon>
                                <text class="order-sn">{{ orderItem.consignee }}</text>
                            </view>
                            <view class="order-code">
                                <u-icon name="qrcode" size="24" color="#666"></u-icon>
                                <text class="code-value">{{ orderItem.code }}</text>
                            </view>
                        </view>
                        <view class="order-status order-status--completed">
                            <u-icon name="checkmark-circle" size="24" color="#1890ff"></u-icon>
                            <text>已核销</text>
                        </view>
                    </view>

                    <!-- 订单商品信息 -->
                    <view class="order-main">
                        <view
                            class="goods"
                            v-for="(goodsItem, goodsIndex) in orderItem.order_goods"
                            :key="goodsIndex"
                        >
                            <view class="goods-wrap">
                                <view class="goods-left">
                                    <view class="image">
                                        <u-image
                                            :src="goodsItem.image"
                                            width="160"
                                            height="160"
                                            radius="8"
                                            mode="aspectFill"
                                        ></u-image>
                                    </view>
                                </view>
                                <view class="goods-right">
                                    <view class="goods-name">{{ goodsItem.goods_name }}</view>
                                    <view class="goods-price">
                                        <view class="price-item">
                                            <text class="label">订单价格</text>
                                            <text class="value">¥{{ goodsItem.total_pay_price }}</text>
                                        </view>
                                        <view class="price-item">
                                            <text class="label">核销金额</text>
                                            <text class="value income">¥{{ goodsItem.verification_price }}</text>
                                        </view>
                                    </view>
                                    <view class="verification-time">
                                        <u-icon name="clock" size="24" color="#999"></u-icon>
                                        <text>{{ orderItem.create_time }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </mescroll-uni>

        <!-- 订单详情弹窗 -->
        <u-popup v-model="showDetail" mode="center" width="90%" border-radius="16">
            <view class="detail-popup" v-if="currentOrder">
                <view class="detail-header">
                    <view class="header-left">
                        <u-icon name="order" size="36" color="#1890ff"></u-icon>
                        <text class="detail-title">订单详情</text>
                    </view>
                    <u-icon name="close" size="30" @click="showDetail = false" class="close-icon"></u-icon>
                </view>
                
                <scroll-view scroll-y class="detail-content">
                    <!-- 订单状态卡片 -->
                    <view class="status-card">
                        <view class="status-icon">
                            <u-icon name="checkmark-circle" size="48" color="#52c41a"></u-icon>
                        </view>
                        <view class="status-info">
                            <text class="status-text">已核销</text>
                            <text class="status-time">{{ currentOrder.create_time }}</text>
                        </view>
                    </view>

                    <!-- 商品信息卡片 -->
                    <view class="goods-card">
                        <view class="card-title">
                            <u-icon name="shopping-cart" size="28" color="#1890ff"></u-icon>
                            <text>商品信息</text>
                        </view>
                        <view class="card-content">
                            <view class="goods-item" v-for="(goods, index) in currentOrder.order_goods" :key="index">
                                <view class="goods-image">
                                    <u-image :src="goods.image" width="120" height="120" radius="8" mode="aspectFill"></u-image>
                                </view>
                                <view class="goods-info">
                                    <view class="goods-name">{{ goods.goods_name }}</view>
                                    <view class="price-info">
                                        <view class="price-row">
                                            <text class="price-label">订单价格</text>
                                            <text class="price-value">¥{{ goods.total_pay_price }}</text>
                                        </view>
                                        <view class="price-row">
                                            <text class="price-label">核销金额</text>
                                            <text class="price-value income">¥{{ goods.verification_price }}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <!-- 核销信息卡片 -->
                    <view class="verification-card">
                        <view class="card-title">
                            <u-icon name="qrcode" size="28" color="#1890ff"></u-icon>
                            <text>核销信息</text>
                        </view>
                        <view class="card-content">
                            <view class="verification-code">
                                <text class="code-label">核销码</text>
                                <text class="code-value">{{ currentOrder.code }}</text>
                            </view>
                            <view class="verification-time">
                                <u-icon name="clock-fill" size="24" color="#666"></u-icon>
                                <text>{{ currentOrder.create_time }}</text>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </u-popup>

        <!-- 全新骨架屏设计 -->
        <view class="skeleton-container" v-if="loading && !isPulling">
            <view class="skeleton-item" v-for="i in 3" :key="i">
                <view class="skeleton-header">
                    <view class="skeleton-avatar skeleton-loading"></view>
                    <view class="skeleton-text skeleton-loading" style="width: 40%"></view>
                    <view class="skeleton-badge skeleton-loading"></view>
                </view>
                <view class="skeleton-content">
                    <view class="skeleton-image skeleton-loading"></view>
                    <view class="skeleton-info">
                        <view class="skeleton-text skeleton-loading" style="width: 90%"></view>
                        <view class="skeleton-price-row">
                            <view class="skeleton-text skeleton-loading" style="width: 40%"></view>
                            <view class="skeleton-text skeleton-loading" style="width: 40%"></view>
                        </view>
                        <view class="skeleton-text skeleton-loading" style="width: 60%"></view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 底部操作按钮区域 -->
        <view class="operation">
            <view
                class="operation-button manual-code"
                @click="showInputCode = true"
            >
                <u-icon name="edit-pen" size="32" color="#666"></u-icon>
                <text>手动输入核销码</text>
            </view>

            <view class="operation-button scan-code" @click="onScanQRCode">
                <u-icon name="scan" size="32" color="#fff"></u-icon>
                <text>扫码核销</text>
            </view>

            <!-- 手动输入核销码MODAL -->
            <u-modal
                ref="uModalInput"
                v-model="showInputCode"
                show-cancel-button
                confirm-text="确定"
                @confirm="inputOrderCode"
                title="手动核销"
                confirmColor="#1890ff"
            >
                <view class="slot-content row-center" style="padding: 40rpx">
                    <u-input
                        type="number"
                        v-model="code"
                        :border="true"
                        placeholder="请输入核销码"
                        style="width: 100%"
                        placeholderStyle="color: #bbb; font-size: 28rpx"
                    />
                </view>
            </u-modal>
        </view>
    </view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js'
import { apiJointoperationList } from '@/api/order'
import { isWeixinClient } from '@/utils/tools'
import wechath5 from '@/utils/wechath5'

export default {
    name: 'OrderList',
    mixins: [MescrollMixin],

    data() {
        return {
            orderList: [], // 订单列表
            code: '', // 核销码
            showInputCode: false, // 显示(输入核销码)：是 | 否
            loading: true, // 加载状态
            isPulling: false, // 下拉刷新状态
            
            // 搜索和筛选
            searchKeyword: '', // 搜索关键词
            showFilter: false, // 显示筛选抽屉
            showCalendar: false, // 显示日历选择器
            dateRange: '', // 日期范围显示
            startDate: '', // 开始日期
            endDate: '', // 结束日期
            isFiltered: false, // 是否已筛选
            loadTimer: null, // 用于防抖的定时器
            clickTimer: null, // 用于按钮点击防抖
            isProcessing: false, // 用于防止重复处理
            isRefreshing: false, // 新增：是否正在刷新
            
            // 详情弹窗
            showDetail: false, // 是否显示详情弹窗
            currentOrder: null, // 当前选中的订单
        }
    },

    mounted() {
        // 页面加载完成，自动触发第一次数据加载
        this.$nextTick(() => {
            const ref = this.$refs.scroll;
            if (ref) {
                ref.mescroll.resetUpScroll();
            }
        });
        
        // 模拟加载完成，关闭骨架屏
        setTimeout(() => {
            this.loading = false;
        }, 1500);
    },

    onShow() {
        // 重置列表数据
        this.orderList = [];
        this.loading = true;
        
        // 重置mescroll并重新加载数据
        this.$nextTick(() => {
            const ref = this.$refs.scroll;
            if (ref) {
                ref.mescroll.resetUpScroll();
            }
        });
    },

    methods: {
        // 添加入场动画
        animateItemsIn() {
            const items = document.querySelectorAll('.animated-item');
            items.forEach((item, index) => {
                item.style.animationDelay = `${index * 0.05}s`;
                item.style.animationName = 'none';
                setTimeout(() => {
                    item.style.animationName = 'fadeInUp';
                }, 10);
            });
        },

        // 刷新列表数据 - 增强版
        refreshData() {
            const ref = this.$refs.scroll;
            if (ref) {
                // 显示下拉刷新状态
                this.isPulling = true;
                
                // 重置并触发上拉加载
                ref.mescroll.resetUpScroll();
                
                // 确保状态最终被重置
                setTimeout(() => {
                    this.isPulling = false;
                }, 1000);
            }
        },

        // 下拉刷新回调
        downCallback() {
            if (this.isRefreshing) return;
            
            this.isRefreshing = true;
            this.isPulling = true;
            
            // 重置列表数据
            this.orderList = [];
            
            // 重新加载第一页数据
            this.upCallback({ num: 1, size: 10 });
        },

        // 上拉加载更多 - 优化版本
        upCallback({ num, size }) {
            const ref = this.$refs.scroll;
            if (!ref) return;
            
            // 显示加载状态
            if (num === 1) {
                this.loading = true;
            }
            
            // 构建请求参数
            const params = {
                page_no: num,
                page_size: size,
                keyword: this.searchKeyword.trim() || undefined,
                start_date: this.isFiltered ? this.startDate : undefined,
                end_date: this.isFiltered ? this.endDate : undefined,
                type: 'all'
            };
            
            console.log('请求参数：', params);
            
            // 清除之前的定时器
            clearTimeout(this.loadTimer);
            
            // 使用Promise包装请求
            new Promise((resolve) => {
                this.loadTimer = setTimeout(() => {
                    resolve(apiJointoperationList(params));
                }, 200);
            })
            .then((res) => {
                console.log('API返回数据：', res);
                
                if (!res) {
                    throw new Error('返回数据为空');
                }
                
                const list = res.list || [];
                const hasNext = res.more === 1;
                const total = res.count || 0;
                
                console.log('处理后的数据：', {
                    listLength: list.length,
                    hasNext,
                    total,
                    currentList: this.orderList
                });
                
                // 更新列表数据
                if (num === 1) {
                    this.orderList = list;
                } else {
                    this.orderList = [...this.orderList, ...list];
                }
                
                // 重置状态
                this.loading = false;
                this.isPulling = false;
                this.isRefreshing = false;
                
                // 通知mescroll加载完成
                if (list.length === 0 && num === 1) {
                    // 只有第一页且没有数据时才显示空数据提示
                    console.log('第一页没有数据');
                    ref.mescroll.endSuccess(0, false);
                } else if (!hasNext) {
                    // 没有更多数据
                    console.log('没有更多数据');
                    ref.mescroll.endSuccess(list.length, false);
                } else {
                    // 还有更多数据
                    console.log('还有更多数据');
                    ref.mescroll.endSuccess(list.length, true);
                }
                
                // 添加动画效果
                this.$nextTick(() => {
                    this.animateItemsIn();
                });
            })
            .catch((err) => {
                console.error('请求失败：', err);
                this.loading = false;
                this.isPulling = false;
                this.isRefreshing = false;
                ref.mescroll.endErr();
                uni.showToast({
                    title: '加载失败，请稍后重试',
                    icon: 'none'
                });
            });
        },

        // 去订单详情 - 修改为显示弹窗
        goOrderDetail(code) {
            if (this.isProcessing) return;
            
            this.isProcessing = true;
            
            // 查找对应的订单
            const order = this.orderList.find(item => item.code === code);
            if (order) {
                this.currentOrder = order;
                this.showDetail = true;
            }
            
            // 重置处理状态
            setTimeout(() => {
                this.isProcessing = false;
            }, 300);
        },

        // 扫描二维码 - 添加防抖
        async onScanQRCode() {
            if (this.isProcessing) return;
            
            this.isProcessing = true;
            
            // #ifdef H5
            if (isWeixinClient()) {
                try {
                    // 初始化微信JS-SDK
                    await wechath5.initJssdk();
                    
                    // 调用微信扫一扫接口
                    wx.scanQRCode({
                        needResult: 1,
                        scanType: ["qrCode"],
                        success: (res) => {
                            const result = res.resultStr;
                            if (result) {
                               this.$Router.push({
									path: '/pages/jointoperation_detail/jointoperation_detail',
									query: { code: result }
								});
                            }
                        },
                        fail: (err) => {
                            console.error('扫码失败：', err);
                            uni.showToast({
                                title: '扫码失败，请重试',
                                icon: 'none'
                            });
                            this.isProcessing = false;
                        }
                    });
                } catch (err) {
                    console.error('初始化失败：', err);
                    uni.showToast({
                        title: '初始化失败，请刷新页面重试',
                        icon: 'none'
                    });
                    this.isProcessing = false;
                }
            } else {
                uni.showModal({
                    title: '提示',
                    content: 'H5环境暂不支持扫码功能，请在微信浏览器或APP中打开使用',
                    showCancel: false,
                    success: () => {
                        this.isProcessing = false;
                    }
                });
            }
            // #endif
            
            // #ifndef H5
            uni.scanCode({
                scanType: ['qrCode'],
                success: (data) => {
                    console.log('扫码成功：', data);
                    if (data.result) {
                        // this.goOrderDetail(data.result);
						uni.hideLoading();
						this.$Router.push({
						    path: '/pages/jointoperation_detail/jointoperation_detail',
						    query: { code: data.result }
						});
                    }
                },
                fail: (err) => {
                    console.error('扫码失败：', err);
                    uni.showToast({
                        title: '扫码失败，请重试',
                        icon: 'none'
                    });
                    this.isProcessing = false;
                }
            });
            // #endif
        },

        // 手动输入核销码 - 添加防抖
        inputOrderCode() {
            if (this.isProcessing) {
                uni.showToast({
                    title: '正在处理中，请稍候',
                    icon: 'none'
                });
                return;
            }
            
            this.isProcessing = true;
            
            if (!this.code) {
                uni.showToast({
                    title: '请输入核销码',
                    icon: 'none'
                });
                this.isProcessing = false;
                return;
            }
            
            // 添加简单验证
            if (this.code.length < 3) {
                uni.showToast({
                    title: '核销码格式不正确',
                    icon: 'none'
                });
                this.isProcessing = false;
                return;
            }
            
            // 显示加载状态
            uni.showLoading({
                title: '正在验证...',
                mask: true
            });
            
            // 直接跳转到详情页面
            uni.hideLoading();
            this.$Router.push({
                path: '/pages/jointoperation_detail/jointoperation_detail',
                query: { code: this.code }
            });
            
            // 重置处理状态
            setTimeout(() => {
                this.isProcessing = false;
            }, 1000);
        },
        
        // 搜索处理
        handleSearch() {
            if (!this.searchKeyword.trim()) return;
            
            // 重置列表并带上搜索参数重新加载
            const ref = this.$refs.scroll;
            if (ref) {
                ref.mescroll.resetUpScroll();
            }
        },
        
        // 清除搜索
        handleClearSearch() {
            this.searchKeyword = '';
            // 重置列表
            const ref = this.$refs.scroll;
            if (ref) {
                ref.mescroll.resetUpScroll();
            }
        },
        
        // 日期变化
        dateChange(e) {
            console.log('日期变化：', e);
            if (e && e.startDate && e.endDate) {
                this.startDate = e.startDate;
                this.endDate = e.endDate;
                this.dateRange = `${e.startDate} 至 ${e.endDate}`;
            }
        },

        // 日期确认
        dateConfirm(e) {
            console.log('日期确认：', e);
            if (e && e.startDate && e.endDate) {
                this.startDate = e.startDate;
                this.endDate = e.endDate;
                this.dateRange = `${e.startDate} 至 ${e.endDate}`;
                this.showCalendar = false;
            } else {
                uni.showToast({
                    title: '请选择有效的时间范围',
                    icon: 'none'
                });
            }
        },
        
        // 重置筛选
        resetFilter() {
            this.startDate = '';
            this.endDate = '';
            this.dateRange = '';
            this.isFiltered = false;
            this.showFilter = false;
        },
        
        // 应用筛选
        applyFilter() {
            console.log('当前时间范围：', this.startDate, this.endDate); // 添加日志
            if (this.startDate && this.endDate) {
                this.isFiltered = true;
                this.showFilter = false;
                
                // 重置列表并带上筛选参数重新加载
                const ref = this.$refs.scroll;
                if (ref) {
                    ref.mescroll.resetUpScroll();
                }
            } else {
                uni.showToast({
                    title: '请选择时间范围',
                    icon: 'none'
                });
            }
        }
    },

    watch: {
        // 输入核销码弹窗
        showInputCode(val) {
            this.$set(this, 'code', '');
            if (val) {
                // 延迟聚焦，确保键盘弹起
                setTimeout(() => {
                    this.$nextTick(() => {
                        const inputEl = document.querySelector('.u-input__input');
                        if (inputEl) inputEl.focus();
                    });
                }, 300);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.verification-list {
    display: flex;
    flex-direction: column;
    padding-bottom: 200rpx;
    background-color: #f5f7fa;
    min-height: 100vh;
    position: relative;
}

/* 头部样式 */
.header {
    background-color: #ffffff;
    padding: 30rpx 20rpx 20rpx;
    position: relative;
    z-index: 10;
    border-bottom: 1px solid #e8e8e8;
}

.header .title {
    font-size: 36rpx;
    font-weight: 600;
    margin-bottom: 20rpx;
    color: #333;
}

.search-bar {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
    background-color: #ffffff;
    padding: 10rpx 20rpx;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.search-bar .search-input {
    flex: 1;
    margin-right: 20rpx;
}

.search-bar .filter-btn {
    padding: 12rpx;
    background-color: #f5f7fa;
    border-radius: 8rpx;
    transition: all 0.3s ease;
}

.search-bar .filter-btn:active {
    transform: scale(0.95);
    background-color: #e8e8e8;
}

/* 新的筛选面板样式 */
.filter-panel {
    padding: 40rpx 30rpx;
    height: 100vh;
    background-color: #fff;
}

.filter-panel .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
}

.filter-panel .filter-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
}

.filter-panel .filter-section {
    margin-bottom: 50rpx;
}

.filter-panel .section-title {
    font-size: 30rpx;
    font-weight: 500;
    margin-bottom: 20rpx;
    color: #333;
}

.filter-panel .date-range {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    border: 1px solid #eee;
    border-radius: 8rpx;
    margin-top: 20rpx;
}

.filter-panel .filter-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 60rpx;
}

.filter-panel .filter-buttons .u-button {
    flex: 1;
    margin: 0 10rpx;
}

/* 新的订单样式 */
.order-contain {
    padding:0 20rpx;
    margin-top: 10rpx;
    padding-bottom: 160rpx;
}

.order-contain .order {
    margin-bottom: 30rpx;
    border-radius: 16rpx;
    background-color: #ffffff;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    animation: fadeInUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.order-contain .order:active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.order-contain .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fafafa;
}

.order-contain .order-info {
    flex: 1;
}

.order-contain .order-user {
    display: flex;
    align-items: center;
    margin-bottom: 12rpx;
}

.order-contain .order-user .order-sn {
    font-size: 30rpx;
    font-weight: 500;
    margin-left: 12rpx;
    color: #333;
}

.order-contain .order-code {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    background-color: #f5f7fa;
    padding: 6rpx 12rpx;
    border-radius: 6rpx;
}

.order-contain .order-code .code-value {
    color: #1890ff;
    font-family: monospace;
    letter-spacing: 1px;
    margin-left: 8rpx;
    font-weight: 500;
}

.order-contain .order-status {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    padding: 8rpx 16rpx;
    border-radius: 6rpx;
    background-color: #e6f7ff;
    color: #1890ff;
}

.order-contain .order-status text {
    margin-left: 6rpx;
}

.order-contain .order-main {
    padding: 24rpx;
}

.goods {
    width: 100%;
    margin-bottom: 20rpx;
    background-color: #fafafa;
    border-radius: 12rpx;
    padding: 16rpx;
}

.goods-wrap {
    display: flex;
    width: 100%;
}

.goods-left {
    flex-shrink: 0;
    margin-right: 20rpx;
}

.goods-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.goods-name {
    color: #333;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 16rpx;
}

.image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 8rpx;
    overflow: hidden;
    background-color: #f5f7fa;
}

.goods-price {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    margin: 16rpx 0;
    padding: 16rpx 0;
    border-top: 1px solid #f0f0f0;
}

.goods-price .price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 26rpx;
}

.goods-price .price-item .label {
    color: #666;
}

.goods-price .price-item .value {
    font-weight: 600;
    color: #ff6b00;
}

.goods-price .price-item .value.income {
    color: #52c41a;
}

.verification-time {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #999;
    margin-top: 16rpx;
    padding-top: 16rpx;
    border-top: 1px solid #f0f0f0;
}

.verification-time text {
    margin-left: 8rpx;
}

/* 底部操作区新样式 */
.operation {
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    padding: 20rpx;
    background-color: #ffffff;
    border-top: 1px solid #e8e8e8;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.operation-button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88rpx;
    border-radius: 12rpx;
    font-size: 28rpx;
    font-weight: 500;
    transition: all 0.3s ease;
}

.operation-button.manual-code {
    background-color: #f5f7fa;
    color: #666;
    margin-right: 20rpx;
}

.operation-button.manual-code:active {
    background-color: #e8e8e8;
    transform: scale(0.98);
}

.operation-button.scan-code {
    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
    color: #fff;
    box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
}

.operation-button.scan-code:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 6rpx rgba(24, 144, 255, 0.2);
}

.operation-button text {
    margin-left: 10rpx;
}

/* 增强版骨架屏 */
@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-loading {
    background: linear-gradient(90deg, #f5f5f5 25%, #ebebeb 50%, #f5f5f5 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

.skeleton-container {
    padding: 20rpx;
    margin-top: 20rpx;
}

.skeleton-item {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
}

.skeleton-header {
    display: flex;
    align-items: center;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #f0f0f0;
}

.skeleton-avatar {
    width: 60rpx;
    height: 60rpx;
    border-radius: 4rpx;
    margin-right: 16rpx;
}

.skeleton-badge {
    width: 100rpx;
    height: 40rpx;
    border-radius: 4rpx;
    margin-left: auto;
}

.skeleton-content {
    display: flex;
    padding-top: 20rpx;
}

.skeleton-image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 8rpx;
    margin-right: 20rpx;
}

.skeleton-info {
    flex: 1;
}

.skeleton-price-row {
    display: flex;
    justify-content: space-between;
    margin: 16rpx 0;
}

.skeleton-text {
    height: 28rpx;
    border-radius: 4rpx;
    margin-bottom: 16rpx;
}

/* 入场动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20rpx);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animated-item {
    animation: fadeInUp 0.3s ease;
}

/* 加载状态样式 */
.mescroll-upwarp {
    min-height: 60rpx;
    padding: 20rpx 0;
    text-align: center;
    background-color: #f5f7fa;
    position: relative;
    z-index: 1;
}

.mescroll-upwarp .upwarp-tip {
    font-size: 24rpx;
    color: #999;
    padding: 10rpx 0;
}

.mescroll-upwarp .upwarp-nodata {
    color: #999;
    font-size: 24rpx;
    padding: 20rpx 0;
    background-color: #f5f7fa;
    position: relative;
    z-index: 1;
}

.mescroll-empty {
    padding: 100rpx 0;
    background-color: #f5f7fa;
    position: relative;
    z-index: 1;
}

.mescroll-empty .empty-tip {
    margin-top: 30rpx;
    font-size: 28rpx;
    color: #999;
}

/* 详情弹窗样式 */
.detail-popup {
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
    border: 1px solid #f0f0f0;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fafafa;
}

.header-left {
    display: flex;
    align-items: center;
}

.detail-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-left: 12rpx;
}

.close-icon {
    padding: 10rpx;
    border-radius: 50%;
    transition: all 0.3s;
}

.close-icon:active {
    background-color: #f0f0f0;
}

.detail-content {
    max-height: 70vh;
    padding: 30rpx;
    background-color: #f5f7fa;
    box-sizing: border-box;
}

/* 状态卡片 */
.status-card {
    background: linear-gradient(135deg, #52c41a 0%, #95de64 100%);
    border-radius: 12rpx;
    padding: 30rpx;
    display: flex;
    align-items: center;
    margin: 0 20rpx 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: calc(100% - 40rpx);
    box-sizing: border-box;
}

.status-icon {
    margin-right: 20rpx;
}

.status-info {
    color: #fff;
}

.status-text {
    font-size: 32rpx;
    font-weight: 600;
    display: block;
    margin-bottom: 8rpx;
}

.status-time {
    font-size: 24rpx;
    opacity: 0.9;
}

/* 通用卡片样式 */
.info-card,
.goods-card,
.verification-card {
    background-color: #fff;
    border-radius: 12rpx;
    margin: 0 20rpx 30rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #f0f0f0;
    width: calc(100% - 40rpx);
    box-sizing: border-box;
}

.card-title {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}

.card-title text {
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
    margin-left: 12rpx;
}

.card-content {
    padding: 20rpx;
    background-color: #fff;
    box-sizing: border-box;
}

/* 信息卡片样式 */
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 0;
    border-bottom: 1px solid #f0f0f0;
    margin: 0;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 26rpx;
}

.info-label text {
    margin-left: 12rpx;
}

.info-value {
    color: #333;
    font-size: 26rpx;
    font-weight: 500;
}

/* 商品卡片样式 */
.goods-item {
    display: flex;
    flex-direction: column;
    padding: 20rpx;
    background-color: #fafafa;
    border-radius: 8rpx;
    margin-bottom: 20rpx;
    border: 1px solid #f0f0f0;
    width: 100%;
    box-sizing: border-box;
}

.goods-item:last-child {
    margin-bottom: 0;
}

.goods-image {
    display: flex;
    justify-content: center;
    margin-bottom: 20rpx;
    border-radius: 8rpx;
    overflow: hidden;
}

.goods-info {
    flex: 1;
    width: 100%;
}

.goods-name {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}

.price-info {
    background-color: #fff;
    padding: 16rpx;
    border-radius: 8rpx;
    border: 1px solid #f0f0f0;
    width: 100%;
    box-sizing: border-box;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12rpx;
    padding: 0 20rpx;
}

.price-row:last-child {
    margin-bottom: 0;
}

.price-label {
    color: #666;
    font-size: 26rpx;
}

.price-value {
    color: #ff6b00;
    font-weight: 500;
    font-size: 26rpx;
}

.price-value.income {
    color: #52c41a;
}

/* 核销信息卡片样式 */
.verification-code {
    background-color: #f0f7ff;
    padding: 20rpx;
    border-radius: 8rpx;
    margin-bottom: 20rpx;
    text-align: center;
    border: 1px solid #e6f7ff;
    width: 100%;
    box-sizing: border-box;
}

.code-label {
    display: block;
    color: #666;
    font-size: 24rpx;
    margin-bottom: 12rpx;
}

.code-value {
    color: #1890ff;
    font-size: 32rpx;
    font-weight: 600;
    font-family: monospace;
    letter-spacing: 2px;
}

.verification-time {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 24rpx;
    padding: 16rpx;
    background-color: #fafafa;
    border-radius: 8rpx;
    border: 1px solid #f0f0f0;
    width: 100%;
    box-sizing: border-box;
}

.verification-time text {
    margin-left: 8rpx;
}
</style>
